<template>
	<view class="wrap-first-tab flex" v-if="list.length > 0">
		<block v-for="(item, index) in list" :key="index">
			<view class="tab-item" @click.stop="onTab(item)">
				<text :class="value === item[status] ? 'tab-active f-30' : 'f-28'">{{ item[name] }}</text>
				
				<view class="tab-line" v-if="value === item[status]"></view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 列表
			 */
			list: {
				type: Array,
				default: [],
			},
			/**
			 * value
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数组中的key
			 */
			status: {
				type: String,
				default: "",
			},
			/**
			 * 显示的
			 */
			name: {
				type: String,
				default: "title"
			}
		},
		methods: {
			/**
			 * 点击
			 */
			onTab(item) {
				this.$emit('input', item[this.status]);
				this.$emit("onTab");
			},
		},
	};
</script>

<style>
	@import "@/css/tab.css";
</style>
